<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" label-width="90px">
            <el-form-item label="基础信息：">
                <el-select v-model="queryParams.source_department_id" placeholder="请选择来源部门" clearable style="width: 160px;">
                    <el-option label="全部" value="" />
                    <el-option label="电商部" value="1" />
                    <el-option label="新媒体部" value="2" />
                </el-select>
                <el-input v-model="queryParams.wechat_nickname" placeholder="请输入微信昵称" clearable style="width: 160px;" />
                <el-input v-model="queryParams.phone_number" placeholder="请输入手机号" clearable style="width: 160px;" />
            </el-form-item>
            <el-form-item label="订单信息：">
                <el-cascader style="width: 160px;"
                    v-model="sourceStore"
                    :options="shopList"
                    placeholder="来源店铺"
                    :show-all-levels="false"
                />
                <span class="label-left">订单日期</span>
                <el-date-picker
                    v-model="queryParams.order_date_range"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right">
                </el-date-picker>

                <span class="label-left">预估使用日期</span>
                <el-date-picker
                    v-model="queryParams.estimate_use_date_range"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                />
                <span class="label-last">购买金额</span>
                <div class="amount">
                    <el-input placeholder="最小值" v-model.number="amountMin" />
                    <span class="line">-</span>
                    <el-input placeholder="最大值" v-model.number="amountMax" />
                </div>
            </el-form-item>
            <el-form-item label="用户信息：">
                <el-select v-model="queryParams.is_add_wechat" placeholder="是否加微" clearable style="width: 160px">
                    <el-option label="未加微" value="0" />
                    <el-option label="已加微" value="1" />
                </el-select>
                <el-select v-model="queryParams.sex" placeholder="性别" clearable style="width: 160px">
                    <el-option
                        v-for="dict in sexList"
                        :key="dict.id"
                        :label="dict.title"
                        :value="dict.id"
                    />
                </el-select>
                <el-select v-model="queryParams.age_range" placeholder="年龄" clearable style="width: 160px">
                    <el-option
                        v-for="dict in agesList"
                        :key="dict.id"
                        :label="dict.title"
                        :value="dict.id"
                    />
                </el-select>
                <el-select v-model="queryParams.pay_state" placeholder="痛点问题" clearable style="width: 160px">
                    <el-option
                        v-for="dict in quesList"
                        :key="dict.id"
                        :label="dict.name"
                        :value="dict.id"
                    />
                </el-select>
                <span class="label-left">加微日期</span>
                <el-date-picker
                    v-model="queryParams.add_wechat_date_range"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right">
                </el-date-picker>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row type="flex" class="mb8" justify="space-between" :gutter="10">
            <el-col :span="1.5">
                <el-button plain type="primary" @click="addCust">新增客户</el-button>
            </el-col>
        </el-row>
        <el-table v-loading="loading" :data="custList">
            <el-table-column label="记录ID"  align="center" prop="id" width="80" />
            <el-table-column label="来源" align="center" prop="source_department_desc" width="90" />
            <el-table-column label="手机号" align="center" prop="phone_number" width="110" :show-overflow-tooltip="true" />
            <el-table-column label="微信昵称" align="center" prop="wechat_nickname" width="100" :show-overflow-tooltip="true" />
            <el-table-column label="来源店铺" align="center" prop="source_store_platform" width="100" :show-overflow-tooltip="true" />
            <el-table-column label="店铺名称" align="center" prop="source_store_desc" width="180" :show-overflow-tooltip="true" />
            <el-table-column label="订单编号" align="center" prop="order_number" width="200" :show-overflow-tooltip="true" />
            <el-table-column label="产品名称" align="center" prop="product_name" width="160" :show-overflow-tooltip="true" />
            <el-table-column label="订单日期" align="center" prop="order_date" width="160" />
            <el-table-column label="收货地址" align="center" prop="consignees_address" width="120" :show-overflow-tooltip="true" />
            <el-table-column label="收货人" align="center" prop="consignees" width="100" :show-overflow-tooltip="true" />
            <el-table-column label="购买数量" align="center" prop="buy_qty" width="100" :show-overflow-tooltip="true" />
            <el-table-column label="购买金额" align="center" prop="buy_amount" width="100" :show-overflow-tooltip="true" />
            <el-table-column label="预估使用日期" align="center" prop="consignees_address" width="180" :show-overflow-tooltip="true" />
            <el-table-column label="年龄" align="center" prop="age_range_desc" width="90"  />
            <el-table-column label="性别" align="center" prop="sex_desc" width="90" />
            <el-table-column label="是否加微" align="center" prop="out_trade_no" width="90">
                <template slot-scope="scope">
                    <span>{{ scope.row.is_add_wechat === 1 ? '是' : '否' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="加微日期" align="center" prop="add_wechat_date" width="160" />
            <el-table-column label="老带新" align="center" width="90" >
                <template slot-scope="scope">
                    <span>{{ scope.row.is_customer_referrals === 1 ? '是' : '否' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="裂变状态" align="center" width="90">
                <template slot-scope="scope">
                    <span>{{ scope.row.mutation_status === 1 ? '是' : '否' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="裂变质量" align="center" width="90">
                <template slot-scope="scope">
                    <span v-if="scope.row.mutation_level === 3">高</span>
                    <span v-else-if="scope.row.mutation_level === 2">中</span>
                    <span v-else-if="scope.row.mutation_level === 1">低</span>
                    <span v-else></span>
                </template>
            </el-table-column>
            <el-table-column label="活跃等级" align="center" width="90">
                <template slot-scope="scope">
                    <span v-if="scope.row.activity_level === 3">高</span>
                    <span v-else-if="scope.row.activity_level === 2">中</span>
                    <span v-else-if="scope.row.activity_level === 1">低</span>
                    <span v-else></span>
                </template>
            </el-table-column>
            <el-table-column label="最近修改人" align="center" prop="update_by" width="100" :show-overflow-tooltip="true" />
            <el-table-column label="最近修改时间" align="center" prop="update_time" width="180" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center" width="180px" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view" @click="goDetail(scope.row.id)">查看</el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="editCust(scope.row.id)">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteCust(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
    </div>
</template>

<script>
import { custList, custDelete } from "@/api/shop";
import { getAges, getSex, getPrivaQues, getShops} from "@/api/dict";

export default {
    data() {
        return {
            loading: true,	// 遮罩层
            queryParams: { 	// 查询参数
                page: 1,
                pageSize: 20,
                buy_amount_range:[]
            },
            amountMin:'',
            amountMax:'',
            sourceStore:'',
            agesList:[],
            sexList:[],
            quesList:[],
            payRange:[],
            dateRange: [],
            custList:[],
            shopList:[],
            total:0,
        };
    },
    created() {
        this.getAgesList()
        this.getSexList()
        this.getPrivaQuesList()
        this.getShopList()
        this.getList();
    },
    methods: {
        getAgesList(){
            getAges().then(res => {
                this.agesList = res.data
            });
        },
        getSexList(){
            getSex().then(res => {
                this.sexList = res.data
            });
        },
        getPrivaQuesList(){
            getPrivaQues().then(res => {
                this.quesList = res.data
            });
        },
        getShopList(){
            getShops().then(res => {
                const sourceMap = {}
                res.data.forEach(item => {
                    const { source_platform, id, shop_name } = item;
                    if (!sourceMap[source_platform]) {
                        sourceMap[source_platform] = {
                            value: '',
                            label: source_platform,
                            children: []
                        };
                    }
                    sourceMap[source_platform].children.push({
                        value: String(id),
                        label: shop_name
                    });
                });
                // 转换为最终数组格式
                this.shopList = Object.values(sourceMap);
            });
        },
        getList() {
            this.loading = true;
            custList(this.queryParams).then(res => {
                this.custList = res.data.data
                this.total = res.data.total;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.page = 1
            if(this.amountMin !== ''){
                this.queryParams.buy_amount_range[0] = this.amountMin
            }
            if(this.amountMax !== ''){
                this.queryParams.buy_amount_range[1] = this.amountMax
            }
            this.queryParams.source_store_id =  this.sourceStore ? this.sourceStore[1] : ''
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryParams");
            this.dateRange = []
            this.payRange = []
            this.amountMin = ''
            this.amountMax = ''
            this.sourceStore = ''
            this.queryParams = {
                page: 1,
                pageSize: 20
            }
            this.handleQuery();
        },
        addCust(){
            this.$router.push({ 
                path: "/shop/client/add"
            })
        },
        goDetail(id){
            this.$router.push({ 
                path: `/shop/client/detail/${id}`
            })
        },
        editCust(id){
            this.$router.push({ 
                path: `/shop/client/edit/${id}`
            })
        },
        deleteCust(id){
            this.$modal.confirm('是否确认删除角色编号为"' + id + '"的数据项？').then(function() {
                return custDelete({id:id});
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {});
        }
    }
};
</script>

<style scoped>
  .label-left{display: inline-block;margin: 0 10px 0 15px;}
  .label-last{display: inline-block;margin-left: 15px;margin-right: 5px;}
  .el-input,
  .el-select{margin-right: 20px;}
  .amount{display: inline-flex;width: 25%;min-width: 180px;max-width: 320px;}
  .amount .el-input{max-width: 80px;}
  .amount .el-input:first-child{margin-right: 10px;}
  .amount .line{text-align: center;display: inline-flex;margin-right: 10px;}
</style>